<template>
  <div>
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>

    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="个人信息" name="second">
          <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
              <span class="demonstration">{{ fit }}</span>
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :fit="fit"
              ></el-image>
            </div>
          </div>
          <el-form :model="userlist" ref="EditorUserForms">
            <el-form-item
              label="犬主姓名"
              prop="name"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.name" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="性  别"
              prop="sex"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.sex" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="证件类型"
              prop="ID_type"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="idtype" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="证件号码"
              prop="icd"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.icd" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="联系电话"
              prop="tel"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.tel" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="现住地址"
              prop="now_address"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.now_address" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="详细地址"
              prop="domicile_address"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.domicile_address" disabled>
                </el-input>
              </el-col>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="犬只信息" name="third">
          <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
              <span class="demonstration">{{ fit }}</span>
              <el-image
                style="width: 100px; height: 100px"
                :src="url2"
                :fit="fit"
              ></el-image>
            </div>
          </div>
          <el-form :model="userlist" ref="EditorUserForms">
            <el-form-item
              label="犬名"
              prop="dog_name"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_name" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="犬种"
              prop="dog_type"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_type" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="性别"
              prop="dog_sex"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_sex" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="体重"
              prop="dog_weight"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_weight" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="肩高"
              prop="dog_heigh"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_heigh" disabled> </el-input>
              </el-col>
            </el-form-item>

            <el-form-item
              label="体长"
              prop="dog_long"
              :label-width="formLabelWidth"
            >
              <el-col :span="8">
                <el-input v-model="userlist.dog_long" disabled> </el-input>
              </el-col>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="免疫信息" name="fourth">免疫信息</el-tab-pane>
      </el-tabs>
    </div>
    <div class="demo-image1" v-show="1>this.status">
      <el-button type="primary" @click="open1" class="abc" >审核通过</el-button>
      <el-button type="danger" @click="open2" class="abc"
        >个人信息不通过</el-button
      >
      <el-button type="danger" @click="open3" class="abc"
        >犬只信息不通过</el-button
      >
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      idtype: "身份证",
      icd: this.$route.params.icd,
      status: this.$route.params.status,
      activeName: "second",
      userlist: {},
      formLabelWidth: "150px",
      fits: ["照片"],
      url: "",
      url2: "",
    };
  },
  methods: {
    goBack() {
      this.$router.push({
        path: "/police/business_handling/registration_audit",
        name: "犬只登记审核",
        params: {},
      });
    },
    open1() {
      this.$confirm("是否通过审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.applySuccess1();
          //this.open4();
          this.$message({
            type: "success",
            message: "审核通过成功!",
          });
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    open2() {
      this.$prompt("请输入个人信息不通过原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log(value);
          axios
            .get("http://localhost:3031/applySuccess2", {
              params: {
                icd: this.icd,
                reason: value,
                reviewer: this.$store.state.useraccount,
              },
            })
            .then((resp) => {
              this.status=1
              
            });
          this.$message({
            type: "success",
            message: "审核未通过:",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    open3() {
      this.$prompt("请输入犬只信息不通过原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          axios
            .get("http://localhost:3031/applySuccess3", {
              params: {
                icd: this.icd,
                reason: value,
                reviewer: this.$store.state.useraccount,
              },
            })
            .then((resp) => {
              this.status=1
              
            });
          console.log(value);
          this.$message({
            type: "success",
            message: "审核未通过 ",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // open4() {
    //   this.$prompt("请给与该狗狗犬牌编号", "犬牌登记", {
    //     confirmButtonText: "登记",
    //     cancelButtonText: '取消',
    //     inputPattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/,
    //     inputErrorMessage: '格式为6~10位数字和英文字母混合'
    //   })
    //     .then(({ value }) => {
    //       axios
    //         .get("http://localhost:3031/petBrandLogin", {
    //           params: {
    //             icd: this.icd,
    //             dognum: value,               
    //           },
    //         })
    //         .then((resp) => {
            
    //         });
    //       this.$message({
    //         type: "success",
    //         message: "犬牌登记成功!",
    //       });
    //     }).catch(() => {
    //       this.open4();
    //       this.$message({
    //         type: "info",
    //         message: "无法取消,请完成犬牌登记",
    //       });
    //     });
    // },

    applySuccess1() {
      axios
        .get("http://localhost:3031/applySuccess1", {
          params: {
            icd: this.icd,
            reviewer: this.$store.state.useraccount,
          },
        })
        .then((resp) => {
          this.status=1
         
        });
    },

    selectData() {
      console.log(this.icd);
      console.log(this.status);
      axios
        .get("http://localhost:3031/selectDate", {
          params: {
            icd: this.icd,
          },
        })
        .then((resp) => {
          this.userlist = resp.data;
          this.url = resp.data.icd_image;
          this.url2 = resp.data.dog_positive_image;
          
        });
    },
    
  },
  created() {
    this.selectData();
  },
  mounted() {},
  computed: {},
};
</script>
<style scoped>
.demo-image {
  margin-left: 110px;
}
.demo-image1 {
  margin-left: 110px;
}
</style>
